<!DOCTYPE html>
<html lang="zh-CN" data-theme="corporate">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DevOps自动化运维管理平台 - Jenkins & Kubernetes</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.21/vue.global.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .architecture-node {
            transition: all 0.3s ease;
        }
        .architecture-node:hover {
            transform: scale(1.05);
        }
        .pipeline-step {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        .flow-arrow {
            animation: flow 3s ease-in-out infinite;
        }
        @keyframes flow {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(10px); }
        }
    </style>
</head>
<body class="bg-base-100">
    <div id="app">
        <!-- 导航栏 -->
        <div class="navbar bg-base-100 shadow-lg sticky top-0 z-50">
            <div class="navbar-start">
                <div class="dropdown">
                    <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
                        <i class="fas fa-bars text-xl"></i>
                    </div>
                    <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
                        <li><a @click="currentSection = 'overview'">平台概览</a></li>
                        <li><a @click="currentSection = 'architecture'">架构设计</a></li>
                        <li><a @click="currentSection = 'pipeline'">CI/CD流程</a></li>
                        <li><a @click="currentSection = 'monitoring'">监控告警</a></li>
                        <li><a @click="currentSection = 'cases'">实施案例</a></li>
                        <li><a @click="currentSection = 'practices'">最佳实践</a></li>
                    </ul>
                </div>
                <a class="btn btn-ghost text-xl">
                    <i class="fas fa-cogs text-primary"></i>
                    DevOps平台
                </a>
            </div>
            <div class="navbar-center hidden lg:flex">
                <ul class="menu menu-horizontal px-1">
                    <li><a @click="currentSection = 'overview'" :class="{'active': currentSection === 'overview'}">平台概览</a></li>
                    <li><a @click="currentSection = 'architecture'" :class="{'active': currentSection === 'architecture'}">架构设计</a></li>
                    <li><a @click="currentSection = 'pipeline'" :class="{'active': currentSection === 'pipeline'}">CI/CD流程</a></li>
                    <li><a @click="currentSection = 'monitoring'" :class="{'active': currentSection === 'monitoring'}">监控告警</a></li>
                    <li><a @click="currentSection = 'cases'" :class="{'active': currentSection === 'cases'}">实施案例</a></li>
                    <li><a @click="currentSection = 'practices'" :class="{'active': currentSection === 'practices'}">最佳实践</a></li>
                </ul>
            </div>
            <div class="navbar-end">
                <div class="dropdown dropdown-end">
                    <div tabindex="0" role="button" class="btn btn-ghost">
                        <i class="fas fa-palette"></i>
                    </div>
                    <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
                        <li><a @click="changeTheme('light')">浅色主题</a></li>
                        <li><a @click="changeTheme('dark')">深色主题</a></li>
                        <li><a @click="changeTheme('corporate')">企业主题</a></li>
                        <li><a @click="changeTheme('cyberpunk')">赛博朋克</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 主要内容 -->
        <main class="container mx-auto px-4 py-8">
            <!-- 平台概览 -->
            <div v-show="currentSection === 'overview'" class="space-y-8">
                <!-- Hero Section -->
                <div class="hero min-h-96 gradient-bg rounded-3xl text-white">
                    <div class="hero-content text-center">
                        <div class="max-w-md">
                            <h1 class="mb-5 text-5xl font-bold">DevOps自动化运维管理平台</h1>
                            <p class="mb-5">基于Jenkins和Kubernetes构建的企业级DevOps解决方案，实现持续集成、持续部署和自动化运维</p>
                            <button class="btn btn-primary btn-lg" @click="currentSection = 'architecture'">
                                <i class="fas fa-rocket mr-2"></i>
                                开始探索
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 核心特性 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="card bg-base-100 shadow-xl card-hover">
                        <div class="card-body text-center">
                            <div class="text-4xl text-primary mb-4">
                                <i class="fas fa-infinity"></i>
                            </div>
                            <h2 class="card-title justify-center">持续集成</h2>
                            <p>自动化构建、测试和代码质量检查</p>
                        </div>
                    </div>
                    <div class="card bg-base-100 shadow-xl card-hover">
                        <div class="card-body text-center">
                            <div class="text-4xl text-secondary mb-4">
                                <i class="fas fa-rocket"></i>
                            </div>
                            <h2 class="card-title justify-center">持续部署</h2>
                            <p>自动化部署和发布管理</p>
                        </div>
                    </div>
                    <div class="card bg-base-100 shadow-xl card-hover">
                        <div class="card-body text-center">
                            <div class="text-4xl text-accent mb-4">
                                <i class="fas fa-chart-line"></i>
                            </div>
                            <h2 class="card-title justify-center">监控告警</h2>
                            <p>实时监控和智能告警系统</p>
                        </div>
                    </div>
                    <div class="card bg-base-100 shadow-xl card-hover">
                        <div class="card-body text-center">
                            <div class="text-4xl text-info mb-4">
                                <i class="fas fa-shield-alt"></i>
                            </div>
                            <h2 class="card-title justify-center">安全管理</h2>
                            <p>全方位安全保障和合规管理</p>
                        </div>
                    </div>
                </div>

                <!-- 技术栈 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title text-2xl mb-6">
                            <i class="fas fa-layer-group text-primary mr-2"></i>
                            技术栈
                        </h2>
                        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
                            <div class="text-center p-4 bg-base-200 rounded-lg">
                                <i class="fab fa-jenkins text-4xl text-blue-600 mb-2"></i>
                                <p class="font-semibold">Jenkins</p>
                            </div>
                            <div class="text-center p-4 bg-base-200 rounded-lg">
                                <i class="fas fa-dharmachakra text-4xl text-blue-500 mb-2"></i>
                                <p class="font-semibold">Kubernetes</p>
                            </div>
                            <div class="text-center p-4 bg-base-200 rounded-lg">
                                <i class="fab fa-docker text-4xl text-blue-400 mb-2"></i>
                                <p class="font-semibold">Docker</p>
                            </div>
                            <div class="text-center p-4 bg-base-200 rounded-lg">
                                <i class="fab fa-git-alt text-4xl text-orange-600 mb-2"></i>
                                <p class="font-semibold">Git</p>
                            </div>
                            <div class="text-center p-4 bg-base-200 rounded-lg">
                                <i class="fas fa-fire text-4xl text-orange-500 mb-2"></i>
                                <p class="font-semibold">Prometheus</p>
                            </div>
                            <div class="text-center p-4 bg-base-200 rounded-lg">
                                <i class="fas fa-chart-area text-4xl text-orange-400 mb-2"></i>
                                <p class="font-semibold">Grafana</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 平台优势 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h2 class="card-title text-xl mb-4">
                                <i class="fas fa-trophy text-warning mr-2"></i>
                                平台优势
                            </h2>
                            <ul class="space-y-3">
                                <li class="flex items-center">
                                    <i class="fas fa-check-circle text-success mr-3"></i>
                                    提高发布频率，缩短上线周期
                                </li>
                                <li class="flex items-center">
                                    <i class="fas fa-check-circle text-success mr-3"></i>
                                    降低发布错误率，提升产品质量
                                </li>
                                <li class="flex items-center">
                                    <i class="fas fa-check-circle text-success mr-3"></i>
                                    自动化运维，减少人工干预
                                </li>
                                <li class="flex items-center">
                                    <i class="fas fa-check-circle text-success mr-3"></i>
                                    实时监控，快速故障恢复
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h2 class="card-title text-xl mb-4">
                                <i class="fas fa-chart-pie text-info mr-2"></i>
                                效果统计
                            </h2>
                            <div class="stats stats-vertical w-full">
                                <div class="stat">
                                    <div class="stat-title">发布频率提升</div>
                                    <div class="stat-value text-primary">10x</div>
                                    <div class="stat-desc">从月发布到日发布</div>
                                </div>
                                <div class="stat">
                                    <div class="stat-title">错误率降低</div>
                                    <div class="stat-value text-secondary">90%</div>
                                    <div class="stat-desc">从10%降至1%</div>
                                </div>
                                <div class="stat">
                                    <div class="stat-title">恢复时间缩短</div>
                                    <div class="stat-value text-accent">95%</div>
                                    <div class="stat-desc">从小时级到分钟级</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 架构设计 -->
            <div v-show="currentSection === 'architecture'" class="space-y-8">
                <div class="text-center mb-8">
                    <h1 class="text-4xl font-bold mb-4">平台架构设计</h1>
                    <p class="text-lg text-base-content/70">分层架构设计，确保系统的可扩展性和可维护性</p>
                </div>

                <!-- 分层架构图 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title text-2xl mb-6">
                            <i class="fas fa-sitemap text-primary mr-2"></i>
                            分层架构
                        </h2>
                        <div class="space-y-6">
                            <!-- 部署和运行层 -->
                            <div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-6 rounded-lg architecture-node">
                                <h3 class="text-xl font-bold mb-3">
                                    <i class="fas fa-cloud mr-2"></i>
                                    部署和运行层
                                </h3>
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    <div class="bg-white/20 p-3 rounded">
                                        <i class="fas fa-dharmachakra mb-2"></i>
                                        <p>Kubernetes集群</p>
                                    </div>
                                    <div class="bg-white/20 p-3 rounded">
                                        <i class="fas fa-helm mb-2"></i>
                                        <p>Helm包管理</p>
                                    </div>
                                    <div class="bg-white/20 p-3 rounded">
                                        <i class="fas fa-chart-line mb-2"></i>
                                        <p>监控日志系统</p>
                                    </div>
                                </div>
                            </div>

                            <!-- 制品管理层 -->
                            <div class="bg-gradient-to-r from-green-500 to-green-600 text-white p-6 rounded-lg architecture-node">
                                <h3 class="text-xl font-bold mb-3">
                                    <i class="fas fa-archive mr-2"></i>
                                    制品管理层
                                </h3>
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    <div class="bg-white/20 p-3 rounded">
                                        <i class="fab fa-docker mb-2"></i>
                                        <p>镜像仓库(Harbor)</p>
                                    </div>
                                    <div class="bg-white/20 p-3 rounded">
                                        <i class="fas fa-box mb-2"></i>
                                        <p>制品仓库(Nexus)</p>
                                    </div>
                                    <div class="bg-white/20 p-3 rounded">
                                        <i class="fab fa-git-alt mb-2"></i>
                                        <p>版本控制(Git)</p>
                                    </div>
                                </div>
                            </div>

                            <!-- 构建和测试层 -->
                            <div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white p-6 rounded-lg architecture-node">
                                <h3 class="text-xl font-bold mb-3">
                                    <i class="fas fa-cogs mr-2"></i>
                                    构建和测试层
                                </h3>
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    <div class="bg-white/20 p-3 rounded">
                                        <i class="fab fa-jenkins mb-2"></i>
                                        <p>Jenkins Master</p>
                                    </div>
                                    <div class="bg-white/20 p-3 rounded">
                                        <i class="fas fa-server mb-2"></i>
                                        <p>Jenkins Agent</p>
                                    </div>
                                    <div class="bg-white/20 p-3 rounded">
                                        <i class="fas fa-vial mb-2"></i>
                                        <p>测试框架</p>
                                    </div>
                                </div>
                            </div>

                            <!-- 基础设施层 -->
                            <div class="bg-gradient-to-r from-purple-500 to-purple-600 text-white p-6 rounded-lg architecture-node">
                                <h3 class="text-xl font-bold mb-3">
                                    <i class="fas fa-server mr-2"></i>
                                    基础设施层
                                </h3>
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    <div class="bg-white/20 p-3 rounded">
                                        <i class="fas fa-cloud mb-2"></i>
                                        <p>云服务平台</p>
                                    </div>
                                    <div class="bg-white/20 p-3 rounded">
                                        <i class="fas fa-database mb-2"></i>
                                        <p>存储服务</p>
                                    </div>
                                    <div class="bg-white/20 p-3 rounded">
                                        <i class="fas fa-network-wired mb-2"></i>
                                        <p>网络配置</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 核心组件 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h2 class="card-title text-xl mb-4">
                                <i class="fab fa-jenkins text-blue-600 mr-2"></i>
                                Jenkins组件
                            </h2>
                            <div class="space-y-4">
                                <div class="flex items-start space-x-3">
                                    <div class="badge badge-primary">Master</div>
                                    <div>
                                        <p class="font-semibold">Jenkins Master</p>
                                        <p class="text-sm text-base-content/70">负责CI/CD流程协调和管理</p>
                                    </div>
                                </div>
                                <div class="flex items-start space-x-3">
                                    <div class="badge badge-secondary">Agent</div>
                                    <div>
                                        <p class="font-semibold">Jenkins Agent</p>
                                        <p class="text-sm text-base-content/70">执行具体的构建和测试任务</p>
                                    </div>
                                </div>
                                <div class="flex items-start space-x-3">
                                    <div class="badge badge-accent">Pipeline</div>
                                    <div>
                                        <p class="font-semibold">Pipeline</p>
                                        <p class="text-sm text-base-content/70">定义构建、测试和部署流程</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h2 class="card-title text-xl mb-4">
                                <i class="fas fa-dharmachakra text-blue-500 mr-2"></i>
                                Kubernetes组件
                            </h2>
                            <div class="space-y-4">
                                <div class="flex items-start space-x-3">
                                    <div class="badge badge-info">Pod</div>
                                    <div>
                                        <p class="font-semibold">Pod</p>
                                        <p class="text-sm text-base-content/70">基本调度单位，容器集合</p>
                                    </div>
                                </div>
                                <div class="flex items-start space-x-3">
                                    <div class="badge badge-warning">Service</div>
                                    <div>
                                        <p class="font-semibold">Service</p>
                                        <p class="text-sm text-base-content/70">服务发现和负载均衡</p>
                                    </div>
                                </div>
                                <div class="flex items-start space-x-3">
                                    <div class="badge badge-success">Deployment</div>
                                    <div>
                                        <p class="font-semibold">Deployment</p>
                                        <p class="text-sm text-base-content/70">管理Pod的创建和更新</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- CI/CD流程 -->
            <div v-show="currentSection === 'pipeline'" class="space-y-8">
                <div class="text-center mb-8">
                    <h1 class="text-4xl font-bold mb-4">CI/CD流程</h1>
                    <p class="text-lg text-base-content/70">完整的持续集成和持续部署流水线</p>
                </div>

                <!-- 流程图 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title text-2xl mb-6">
                            <i class="fas fa-project-diagram text-primary mr-2"></i>
                            CI/CD流水线
                        </h2>
                        <div class="flex flex-col lg:flex-row items-center justify-between space-y-4 lg:space-y-0 lg:space-x-4">
                            <!-- 代码提交 -->
                            <div class="pipeline-step bg-blue-100 p-4 rounded-lg text-center min-w-32">
                                <i class="fab fa-git-alt text-3xl text-blue-600 mb-2"></i>
                                <p class="font-semibold">代码提交</p>
                                <p class="text-sm text-gray-600">Git Push</p>
                            </div>
                            <i class="fas fa-arrow-right text-2xl text-gray-400 flow-arrow hidden lg:block"></i>
                            
                            <!-- 触发构建 -->
                            <div class="pipeline-step bg-green-100 p-4 rounded-lg text-center min-w-32">
                                <i class="fas fa-play text-3xl text-green-600 mb-2"></i>
                                <p class="font-semibold">触发构建</p>
                                <p class="text-sm text-gray-600">Webhook</p>
                            </div>
                            <i class="fas fa-arrow-right text-2xl text-gray-400 flow-arrow hidden lg:block"></i>
                            
                            <!-- 代码检出 -->
                            <div class="pipeline-step bg-orange-100 p-4 rounded-lg text-center min-w-32">
                                <i class="fas fa-download text-3xl text-orange-600 mb-2"></i>
                                <p class="font-semibold">代码检出</p>
                                <p class="text-sm text-gray-600">Git Clone</p>
                            </div>
                            <i class="fas fa-arrow-right text-2xl text-gray-400 flow-arrow hidden lg:block"></i>
                            
                            <!-- 构建测试 -->
                            <div class="pipeline-step bg-purple-100 p-4 rounded-lg text-center min-w-32">
                                <i class="fas fa-cogs text-3xl text-purple-600 mb-2"></i>
                                <p class="font-semibold">构建测试</p>
                                <p class="text-sm text-gray-600">Build & Test</p>
                            </div>
                            <i class="fas fa-arrow-right text-2xl text-gray-400 flow-arrow hidden lg:block"></i>
                            
                            <!-- 镜像构建 -->
                            <div class="pipeline-step bg-indigo-100 p-4 rounded-lg text-center min-w-32">
                                <i class="fab fa-docker text-3xl text-indigo-600 mb-2"></i>
                                <p class="font-semibold">镜像构建</p>
                                <p class="text-sm text-gray-600">Docker Build</p>
                            </div>
                            <i class="fas fa-arrow-right text-2xl text-gray-400 flow-arrow hidden lg:block"></i>
                            
                            <!-- 部署发布 -->
                            <div class="pipeline-step bg-red-100 p-4 rounded-lg text-center min-w-32">
                                <i class="fas fa-rocket text-3xl text-red-600 mb-2"></i>
                                <p class="font-semibold">部署发布</p>
                                <p class="text-sm text-gray-600">K8s Deploy</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 详细步骤 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <!-- 持续集成 -->
                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h2 class="card-title text-xl mb-4">
                                <i class="fas fa-infinity text-primary mr-2"></i>
                                持续集成 (CI)
                            </h2>
                            <div class="timeline timeline-vertical">
                                <div class="timeline-item">
                                    <div class="timeline-start timeline-box">
                                        <div class="font-semibold">代码检出</div>
                                        <div class="text-sm">从Git仓库获取最新代码</div>
                                    </div>
                                    <div class="timeline-middle">
                                        <i class="fas fa-circle text-primary"></i>
                                    </div>
                                    <hr class="bg-primary"/>
                                </div>
                                <div class="timeline-item">
                                    <hr class="bg-primary"/>
                                    <div class="timeline-middle">
                                        <i class="fas fa-circle text-primary"></i>
                                    </div>
                                    <div class="timeline-end timeline-box">
                                        <div class="font-semibold">依赖安装</div>
                                        <div class="text-sm">安装项目依赖包</div>
                                    </div>
                                    <hr class="bg-primary"/>
                                </div>
                                <div class="timeline-item">
                                    <hr class="bg-primary"/>
                                    <div class="timeline-start timeline-box">
                                        <div class="font-semibold">代码构建</div>
                                        <div class="text-sm">编译和打包应用</div>
                                    </div>
                                    <div class="timeline-middle">
                                        <i class="fas fa-circle text-primary"></i>
                                    </div>
                                    <hr class="bg-primary"/>
                                </div>
                                <div class="timeline-item">
                                    <hr class="bg-primary"/>
                                    <div class="timeline-middle">
                                        <i class="fas fa-circle text-primary"></i>
                                    </div>
                                    <div class="timeline-end timeline-box">
                                        <div class="font-semibold">单元测试</div>
                                        <div class="text-sm">执行自动化测试</div>
                                    </div>
                                    <hr class="bg-primary"/>
                                </div>
                                <div class="timeline-item">
                                    <hr class="bg-primary"/>
                                    <div class="timeline-start timeline-box">
                                        <div class="font-semibold">质量检查</div>
                                        <div class="text-sm">代码质量和安全扫描</div>
                                    </div>
                                    <div class="timeline-middle">
                                        <i class="fas fa-circle text-primary"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 持续部署 -->
                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h2 class="card-title text-xl mb-4">
                                <i class="fas fa-rocket text-secondary mr-2"></i>
                                持续部署 (CD)
                            </h2>
                            <div class="timeline timeline-vertical">
                                <div class="timeline-item">
                                    <div class="timeline-start timeline-box">
                                        <div class="font-semibold">镜像构建</div>
                                        <div class="text-sm">构建Docker镜像</div>
                                    </div>
                                    <div class="timeline-middle">
                                        <i class="fas fa-circle text-secondary"></i>
                                    </div>
                                    <hr class="bg-secondary"/>
                                </div>
                                <div class="timeline-item">
                                    <hr class="bg-secondary"/>
                                    <div class="timeline-middle">
                                        <i class="fas fa-circle text-secondary"></i>
                                    </div>
                                    <div class="timeline-end timeline-box">
                                        <div class="font-semibold">镜像推送</div>
                                        <div class="text-sm">推送到镜像仓库</div>
                                    </div>
                                    <hr class="bg-secondary"/>
                                </div>
                                <div class="timeline-item">
                                    <hr class="bg-secondary"/>
                                    <div class="timeline-start timeline-box">
                                        <div class="font-semibold">环境准备</div>
                                        <div class="text-sm">准备部署环境</div>
                                    </div>
                                    <div class="timeline-middle">
                                        <i class="fas fa-circle text-secondary"></i>
                                    </div>
                                    <hr class="bg-secondary"/>
                                </div>
                                <div class="timeline-item">
                                    <hr class="bg-secondary"/>
                                    <div class="timeline-middle">
                                        <i class="fas fa-circle text-secondary"></i>
                                    </div>
                                    <div class="timeline-end timeline-box">
                                        <div class="font-semibold">应用部署</div>
                                        <div class="text-sm">部署到Kubernetes</div>
                                    </div>
                                    <hr class="bg-secondary"/>
                                </div>
                                <div class="timeline-item">
                                    <hr class="bg-secondary"/>
                                    <div class="timeline-start timeline-box">
                                        <div class="font-semibold">部署验证</div>
                                        <div class="text-sm">验证部署结果</div>
                                    </div>
                                    <div class="timeline-middle">
                                        <i class="fas fa-circle text-secondary"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Pipeline配置示例 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title text-xl mb-4">
                            <i class="fas fa-code text-accent mr-2"></i>
                            Jenkinsfile示例
                        </h2>
                        <div class="mockup-code">
                            <pre><code>pipeline {
    agent {
        kubernetes {
            cloud 'k8s-cloud'
            yaml '''
                apiVersion: v1
                kind: Pod
                spec:
                  containers:
                  - name: maven
                    image: maven:3.6-jdk-8
                    command: ['cat']
                    tty: true
                  - name: docker
                    image: docker:latest
                    command: ['cat']
                    tty: true
                    volumeMounts:
                    - name: docker-sock
                      mountPath: /var/run/docker.sock
                  volumes:
                  - name: docker-sock
                    hostPath:
                      path: /var/run/docker.sock
            '''
        }
    }
    
    stages {
        stage('Checkout') {
            steps {
                git 'https://github.com/example/app.git'
            }
        }
        
        stage('Build') {
            steps {
                container('maven') {
                    sh 'mvn clean package'
                }
            }
        }
        
        stage('Test') {
            steps {
                container('maven') {
                    sh 'mvn test'
                }
            }
        }
        
        stage('Docker Build') {
            steps {
                container('docker') {
                    sh 'docker build -t myapp:${BUILD_NUMBER} .'
                    sh 'docker push harbor.example.com/myapp:${BUILD_NUMBER}'
                }
            }
        }
        
        stage('Deploy') {
            steps {
                sh '''
                    kubectl set image deployment/myapp \\
                        myapp=harbor.example.com/myapp:${BUILD_NUMBER}
                    kubectl rollout status deployment/myapp
                '''
            }
        }
    }
}</code></pre>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 监控告警 -->
            <div v-show="currentSection === 'monitoring'" class="space-y-8">
                <div class="text-center mb-8">
                    <h1 class="text-4xl font-bold mb-4">监控告警系统</h1>
                    <p class="text-lg text-base-content/70">全方位监控和智能告警，确保系统稳定运行</p>
                </div>

                <!-- 监控指标 -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h2 class="card-title text-lg">
                                <i class="fas fa-server text-primary mr-2"></i>
                                系统监控
                            </h2>
                            <div class="space-y-3">
                                <div class="flex justify-between items-center">
                                    <span>CPU使用率</span>
                                    <div class="badge badge-success">65%</div>
                                </div>
                                <progress class="progress progress-success w-full" value="65" max="100"></progress>
                                
                                <div class="flex justify-between items-center">
                                    <span>内存使用率</span>
                                    <div class="badge badge-warning">78%</div>
                                </div>
                                <progress class="progress progress-warning w-full" value="78" max="100"></progress>
                                
                                <div class="flex justify-between items-center">
                                    <span>磁盘使用率</span>
                                    <div class="badge badge-info">45%</div>
                                </div>
                                <progress class="progress progress-info w-full" value="45" max="100"></progress>
                            </div>
                        </div>
                    </div>

                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h2 class="card-title text-lg">
                                <i class="fas fa-chart-line text-secondary mr-2"></i>
                                应用监控
                            </h2>
                            <div class="space-y-3">
                                <div class="stat">
                                    <div class="stat-title">响应时间</div>
                                    <div class="stat-value text-sm">125ms</div>
                                    <div class="stat-desc text-success">↗︎ 5% (7天)</div>
                                </div>
                                <div class="stat">
                                    <div class="stat-title">吞吐量</div>
                                    <div class="stat-value text-sm">1.2K/s</div>
                                    <div class="stat-desc text-success">↗︎ 12% (7天)</div>
                                </div>
                                <div class="stat">
                                    <div class="stat-title">错误率</div>
                                    <div class="stat-value text-sm">0.1%</div>
                                    <div class="stat-desc text-error">↘︎ 0.05% (7天)</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h2 class="card-title text-lg">
                                <i class="fas fa-bell text-accent mr-2"></i>
                                告警状态
                            </h2>
                            <div class="space-y-3">
                                <div class="alert alert-success">
                                    <i class="fas fa-check-circle"></i>
                                    <span>系统运行正常</span>
                                </div>
                                <div class="alert alert-warning">
                                    <i class="fas fa-exclamation-triangle"></i>
                                    <span>内存使用率偏高</span>
                                </div>
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle"></i>
                                    <span>3个构建任务排队中</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 监控架构 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title text-2xl mb-6">
                            <i class="fas fa-eye text-primary mr-2"></i>
                            监控架构
                        </h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                            <div class="text-center p-4 bg-orange-100 rounded-lg">
                                <i class="fas fa-fire text-4xl text-orange-600 mb-3"></i>
                                <h3 class="font-bold text-lg">Prometheus</h3>
                                <p class="text-sm">指标收集和存储</p>
                                <ul class="text-xs mt-2 space-y-1">
                                    <li>• 时间序列数据库</li>
                                    <li>• 多维数据模型</li>
                                    <li>• 强大的查询语言</li>
                                </ul>
                            </div>
                            <div class="text-center p-4 bg-orange-200 rounded-lg">
                                <i class="fas fa-chart-area text-4xl text-orange-700 mb-3"></i>
                                <h3 class="font-bold text-lg">Grafana</h3>
                                <p class="text-sm">数据可视化</p>
                                <ul class="text-xs mt-2 space-y-1">
                                    <li>• 丰富的图表类型</li>
                                    <li>• 自定义仪表板</li>
                                    <li>• 告警规则配置</li>
                                </ul>
                            </div>
                            <div class="text-center p-4 bg-blue-100 rounded-lg">
                                <i class="fas fa-search text-4xl text-blue-600 mb-3"></i>
                                <h3 class="font-bold text-lg">ELK Stack</h3>
                                <p class="text-sm">日志收集分析</p>
                                <ul class="text-xs mt-2 space-y-1">
                                    <li>• Elasticsearch搜索</li>
                                    <li>• Logstash数据处理</li>
                                    <li>• Kibana可视化</li>
                                </ul>
                            </div>
                            <div class="text-center p-4 bg-green-100 rounded-lg">
                                <i class="fas fa-bell text-4xl text-green-600 mb-3"></i>
                                <h3 class="font-bold text-lg">AlertManager</h3>
                                <p class="text-sm">告警管理</p>
                                <ul class="text-xs mt-2 space-y-1">
                                    <li>• 告警路由</li>
                                    <li>• 告警抑制</li>
                                    <li>• 多渠道通知</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 告警规则 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h2 class="card-title text-xl mb-4">
                                <i class="fas fa-exclamation-triangle text-warning mr-2"></i>
                                告警规则
                            </h2>
                            <div class="overflow-x-auto">
                                <table class="table table-zebra">
                                    <thead>
                                        <tr>
                                            <th>指标</th>
                                            <th>阈值</th>
                                            <th>级别</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>CPU使用率</td>
                                            <td>>80%</td>
                                            <td><div class="badge badge-warning">警告</div></td>
                                        </tr>
                                        <tr>
                                            <td>内存使用率</td>
                                            <td>>85%</td>
                                            <td><div class="badge badge-error">严重</div></td>
                                        </tr>
                                        <tr>
                                            <td>磁盘使用率</td>
                                            <td>>90%</td>
                                            <td><div class="badge badge-error">严重</div></td>
                                        </tr>
                                        <tr>
                                            <td>响应时间</td>
                                            <td>>500ms</td>
                                            <td><div class="badge badge-warning">警告</div></td>
                                        </tr>
                                        <tr>
                                            <td>错误率</td>
                                            <td>>5%</td>
                                            <td><div class="badge badge-error">严重</div></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h2 class="card-title text-xl mb-4">
                                <i class="fas fa-paper-plane text-info mr-2"></i>
                                通知渠道
                            </h2>
                            <div class="space-y-4">
                                <div class="flex items-center space-x-3">
                                    <i class="fas fa-envelope text-2xl text-blue-500"></i>
                                    <div>
                                        <p class="font-semibold">邮件通知</p>
                                        <p class="text-sm text-base-content/70">发送详细告警信息到邮箱</p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <i class="fab fa-slack text-2xl text-purple-500"></i>
                                    <div>
                                        <p class="font-semibold">Slack通知</p>
                                        <p class="text-sm text-base-content/70">实时推送到Slack频道</p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <i class="fab fa-weixin text-2xl text-green-500"></i>
                                    <div>
                                        <p class="font-semibold">微信通知</p>
                                        <p class="text-sm text-base-content/70">企业微信群消息推送</p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <i class="fas fa-sms text-2xl text-orange-500"></i>
                                    <div>
                                        <p class="font-semibold">短信通知</p>
                                        <p class="text-sm text-base-content/70">紧急告警短信提醒</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 实施案例 -->
            <div v-show="currentSection === 'cases'" class="space-y-8">
                <div class="text-center mb-8">
                    <h1 class="text-4xl font-bold mb-4">实施案例</h1>
                    <p class="text-lg text-base-content/70">真实的企业级DevOps转型案例和实践经验</p>
                </div>

                <!-- 案例1：企业级DevOps转型 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title text-2xl mb-6">
                            <i class="fas fa-building text-primary mr-2"></i>
                            案例一：企业级DevOps转型
                        </h2>
                        
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                            <!-- 转型前 -->
                            <div class="space-y-4">
                                <h3 class="text-xl font-bold text-error">
                                    <i class="fas fa-times-circle mr-2"></i>
                                    转型前状况
                                </h3>
                                <div class="bg-red-50 p-4 rounded-lg">
                                    <ul class="space-y-2">
                                        <li class="flex items-center">
                                            <i class="fas fa-exclamation-triangle text-red-500 mr-2"></i>
                                            发布周期长：每月发布一次
                                        </li>
                                        <li class="flex items-center">
                                            <i class="fas fa-exclamation-triangle text-red-500 mr-2"></i>
                                            错误率高：发布错误率达10%
                                        </li>
                                        <li class="flex items-center">
                                            <i class="fas fa-exclamation-triangle text-red-500 mr-2"></i>
                                            恢复时间长：故障恢复需数小时
                                        </li>
                                        <li class="flex items-center">
                                            <i class="fas fa-exclamation-triangle text-red-500 mr-2"></i>
                                            团队协作差：开发运维分离
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <!-- 转型后 -->
                            <div class="space-y-4">
                                <h3 class="text-xl font-bold text-success">
                                    <i class="fas fa-check-circle mr-2"></i>
                                    转型后效果
                                </h3>
                                <div class="bg-green-50 p-4 rounded-lg">
                                    <ul class="space-y-2">
                                        <li class="flex items-center">
                                            <i class="fas fa-check text-green-500 mr-2"></i>
                                            发布频率提升：每天多次发布
                                        </li>
                                        <li class="flex items-center">
                                            <i class="fas fa-check text-green-500 mr-2"></i>
                                            错误率降低：发布错误率降至1%
                                        </li>
                                        <li class="flex items-center">
                                            <i class="fas fa-check text-green-500 mr-2"></i>
                                            恢复时间缩短：故障恢复数十分钟
                                        </li>
                                        <li class="flex items-center">
                                            <i class="fas fa-check text-green-500 mr-2"></i>
                                            团队协作改善：开发运维一体化
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- 实施步骤 -->
                        <div class="mt-8">
                            <h3 class="text-xl font-bold mb-4">
                                <i class="fas fa-list-ol text-info mr-2"></i>
                                实施步骤
                            </h3>
                            <div class="steps steps-vertical lg:steps-horizontal w-full">
                                <div class="step step-primary">基础环境搭建</div>
                                <div class="step step-primary">持续集成实现</div>
                                <div class="step step-primary">持续部署配置</div>
                                <div class="step step-primary">监控告警部署</div>
                                <div class="step step-primary">优化和改进</div>
                            </div>
                        </div>

                        <!-- 关键指标对比 -->
                        <div class="mt-8">
                            <h3 class="text-xl font-bold mb-4">
                                <i class="fas fa-chart-bar text-accent mr-2"></i>
                                关键指标对比
                            </h3>
                            <div class="overflow-x-auto">
                                <table class="table table-zebra">
                                    <thead>
                                        <tr>
                                            <th>指标</th>
                                            <th>转型前</th>
                                            <th>转型后</th>
                                            <th>改善幅度</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>发布频率</td>
                                            <td>每月1次</td>
                                            <td>每天多次</td>
                                            <td><div class="badge badge-success">提升10倍</div></td>
                                        </tr>
                                        <tr>
                                            <td>发布错误率</td>
                                            <td>10%</td>
                                            <td>1%</td>
                                            <td><div class="badge badge-success">降低90%</div></td>
                                        </tr>
                                        <tr>
                                            <td>故障恢复时间</td>
                                            <td>数小时</td>
                                            <td>数十分钟</td>
                                            <td><div class="badge badge-success">缩短95%</div></td>
                                        </tr>
                                        <tr>
                                            <td>部署时间</td>
                                            <td>2-4小时</td>
                                            <td>10-15分钟</td>
                                            <td><div class="badge badge-success">缩短85%</div></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 案例2：微服务CI/CD -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title text-2xl mb-6">
                            <i class="fas fa-cubes text-secondary mr-2"></i>
                            案例二：微服务CI/CD实践
                        </h2>

                        <!-- 项目架构 -->
                        <div class="mb-6">
                            <h3 class="text-xl font-bold mb-4">
                                <i class="fas fa-sitemap text-info mr-2"></i>
                                项目架构
                            </h3>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="bg-blue-100 p-4 rounded-lg text-center">
                                    <i class="fas fa-user-service text-3xl text-blue-600 mb-2"></i>
                                    <h4 class="font-bold">用户服务</h4>
                                    <p class="text-sm">用户管理和认证</p>
                                </div>
                                <div class="bg-green-100 p-4 rounded-lg text-center">
                                    <i class="fas fa-shopping-cart text-3xl text-green-600 mb-2"></i>
                                    <h4 class="font-bold">订单服务</h4>
                                    <p class="text-sm">订单处理和管理</p>
                                </div>
                                <div class="bg-orange-100 p-4 rounded-lg text-center">
                                    <i class="fas fa-credit-card text-3xl text-orange-600 mb-2"></i>
                                    <h4 class="font-bold">支付服务</h4>
                                    <p class="text-sm">支付处理和对账</p>
                                </div>
                            </div>
                        </div>

                        <!-- CI/CD策略 -->
                        <div class="mb-6">
                            <h3 class="text-xl font-bold mb-4">
                                <i class="fas fa-strategy text-warning mr-2"></i>
                                CI/CD策略
                            </h3>
                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                                <div class="space-y-3">
                                    <h4 class="font-semibold text-primary">独立Pipeline</h4>
                                    <ul class="space-y-2">
                                        <li class="flex items-center">
                                            <i class="fas fa-check text-green-500 mr-2"></i>
                                            每个服务独立的代码仓库
                                        </li>
                                        <li class="flex items-center">
                                            <i class="fas fa-check text-green-500 mr-2"></i>
                                            独立的构建和部署流程
                                        </li>
                                        <li class="flex items-center">
                                            <i class="fas fa-check text-green-500 mr-2"></i>
                                            独立的发布周期
                                        </li>
                                    </ul>
                                </div>
                                <div class="space-y-3">
                                    <h4